<template>
  <div class="article-container">
    <el-row style="margin-top: 20px;">
      <el-col :span="12" :offset="4">
        <el-form :model="formData" :rules="rules" ref="formData" label-width="110px" class="demo-formData">
          <el-row>
            <el-col :span="16">
              <el-form-item label-width="80px" label="作者:" prop="author">
                <el-input v-model="formData.author"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item class="button_submit" label-width="80px">
                <el-button type="primary" @click="submitForm('formData')">立即添加</el-button>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item label-width="80px" label="标题:" prop="title">
                <el-input v-model="formData.title" :rows="1" type="textarea" class="article-textarea" autosize
                          placeholder="请输入内容"/>
                <!--                <span v-show="contentShortLength" class="word-counter">{{ contentShortLength }}字</span>-->
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-form-item prop="content" label-width="80px" label="摘要:">
              <el-input
                type="textarea"
                :rows="4"
                placeholder="请输入内容(200字内)"
                :maxlength="200"
                v-model="formData.contentShort"
                show-word-limit>
              </el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item prop="content" label-width="80px" label="正文:">
              <!--              <el-input-->
              <!--                type="textarea"-->
              <!--                :rows="12"-->
              <!--                placeholder="请输入内容(2000字内)"-->
              <!--                :maxlength="2000"-->
              <!--                v-model="formData.content"-->
              <!--                show-word-limit>-->
              <!--              </el-input>-->
              <mavon-editor v-model="formData.content" ref="md"/>
            </el-form-item>
          </el-row>
<!--          <el-form-item class="button_submit">-->
<!--            <el-button type="primary" @click="submitForm('formData')">立即添加</el-button>-->
<!--          </el-form-item>-->
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {addArticle, getArticle, updateArticle} from "../../../api/article";

export default {
  name: "AddArticle",

  data() {
    return {
      clubId: null,
      formData: {},

      rules: {
        name: [
          {required: true, message: '请输入社团名称', trigger: 'blur'}
        ],
        clubIntroduce: [
          {required: true, message: '请输入社团简介', trigger: 'blur'}
        ],
        // administrator: [
        //   {required: true, message: '请审输入核人ID'},
        //   {type: 'number', message: 'ID号码必须是数字'}
        // ],
        clubNotice: [
          {required: true, message: '请输入社团公告', trigger: 'blur'}
        ]
      },
    }
  },
  computed: {},

  created() {
    this.clubId = this.$route.params.clubId;
    console.log("clubID:", this.clubId)
    this.getArticleInformation();
  },
  methods: {
    // async getArticleInformation() {
    //   await getArticle({
    //     articleId: this.articleId
    //   }).then(res => {
    //     this.formData = res.data;
    //     console.log("info:", this.formData)
    //   })
    // },

    submitForm() {
      console.log(this.formData)
      this.formData.createTime = "";
      this.formData.updateTime = "";
      this.formData.clubId = this.clubId;
      this.formData.status = 0;
      //md格式
      this.formData.content = this.$refs.md.d_value;
      //html格式存储
      // this.formData.content= this.$refs.md.d_render;
      if (this.formData.content.length == 0) {
        alert("请填写")
        return;
      }
      Object.assign(this.formData)
      this.$refs.formData.validate(valid => {
        if (valid) {
          addArticle(this.formData).then(response => {
            this.$message({
              type: 'success',
              message: '添加成功'
            });
            // this.$router.push({path: `articleList/${this.clubId}`})
            this.$router.back();
            // this.$router.push('/managerHome/clubManage')
          });
        } else {
          this.$message({
            type: 'error',
            message: '操作失败'
          });
        }
      })
    },
    draftForm() {
      if (this.postForm.content.length === 0 || this.postForm.title.length === 0) {
        this.$message({
          message: '请填写必要的标题和内容',
          type: 'warning'
        })
        return
      }
      this.$message({
        message: '保存成功',
        type: 'success',
        showClose: true,
        duration: 1000
      })
      this.postForm.status = 'draft'
    },

  }
}
</script>

<style Lang="less" scoped>
.article-container {
  //float: left;
}

</style>


